// 作用：类似与 useState Hook，用来为函数组件提供状态
// 场景：当组件的状态逻辑复杂或下一个(新)状态取决于上一个(旧)状态时，推荐使用 useReducer Hook
// 优势：将组件内部的逻辑状态抽离到组件外部 (reducer 函数)，减轻组件自身的负担

// 参数 1：reducer 函数，处理逻辑状态，签名为 (state, action) => newState，根据当前状态计算出新的状态并返回
// 参数 2：initialState 状态初始值

// 返回值：状态 (state)、修改状态的函数(dispatch)
// const [state, dispatch] = useReducer(reducer, initialState)

// 更改值：
// 参数 action 和 redux 的概念相同
// 参数 1：action：动作、行为，即带有 type 属性的对象，type 表示当前 action 的类型
// 参数 2：对象中的其他属性，例如：payload，表示需要传递的数据
// dispatch({ type: 'increment', payload: 1 })

import { useReducer } from 'react'

type ActionType = { type: 'increment'; payload: number } | { type: 'decrement'; payload: number }

const reducer = (state: number, action: ActionType) => {
  switch (action.type) {
    case 'increment':
      return state + action.payload
    case 'decrement':
      return state - action.payload
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, 0)

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => dispatch({ type: 'increment', payload: 1 })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement', payload: 1 })}>-</button>
    </div>
  )
}

export default App
